<template>
    <div id="manage">
        <div class="manage_top">
            <div class="form">
                <div style="margin: 15px 20px 0 20px">
                    <zy-select v-if="formConfig" :fromValue="queryForm" :formConfig="formConfig" @search="search" @resetForm="resetForm" :actions="actions"></zy-select>
                </div>
                <div style="height: 40px; display: flex; margin: 10px 20px 0 20px">
                    <div class="table_title">{{ table_title }}管理</div>
                    <div class="btns">
                        <el-button v-for="item in actions" :key="item.label" :icon="item.icon" @click="item.click()">{{ item.label }}</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="manage_bottom">
            <div class="table">
                <div class="table_mask"></div>
                <zy-table :loading="loading" :tableData="tableData" :tableColumn="tableColumn" :pageSize="pagination.pageSize" :total="pagination.total" @changePage="changePage" @changeID="changeID"></zy-table>
            </div>
        </div>
        <zy-form ref="zyform" :dialog="dialog" @add="addBaxiu" @set="edit"></zy-form>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { zoneGetlistApi } from '@/requset/api'
import { formConfig, config0, config2, config1, column } from './formConfig.js'
import SearchManage from '@/components/basic/SearchManage.vue'
import { deepClone } from '@/plugins/clone'
export default {
    extends: SearchManage,
    data() {
        return {
            table_title: '报修管理',
            url: 'baoxiu',
            actions: [
                {
                    label: '添加',
                    icon: 'el-icon-folder-add',
                    click: () => {
                        this.handleAdd()
                    },
                    if: () => this.operate,
                },
            ],
            baseForm: {
                device_id: null,
                reporter: null,
                sectioner: null,
                state: null,
                isShoudown: null,
                state: 1,
            },
            queryForm: {
                device_name: null,
                scope_id: null,
                scope_id_list: [],
                reporter: null,
                sectioner: null,
                state: null,
                page: 1,
                size: 20,
            },
            queryFormC: {
                device_name: null,
                scope_id: null,
                scope_id_list: [],
                reporter: null,
                sectioner: null,
                state: null,
                page: 1,
                size: 20,
            },
        }
    },
    methods: {
        zoneGetlist(zone_id) {
            zoneGetlistApi(zone_id).then((res) => {
                if (res.data.code == 0) {
                    this.zone_device_list = res.data.data
                } else {
                    this.zone_device_list = []
                }
            })
        },
        handleScopeChange(e) {
            let zone_id = e[e.length - 1]
            this.zoneGetlist(zone_id)
        },
        BeforeAdd() {
            this.dialog.config = deepClone(config0)
        },
        addBaxiu() {
            let form = deepClone(this.dialog.form)
            delete form.device
            this.add(form)
        },
        BeforeEdit() {
            this.dialog.config = deepClone(config2)
        },
        handleEdit(val) {
            this.BeforeEdit()
            this.dialog.title = '编辑' + this.table_title
            this.dialog.form = this.from(deepClone(val))
            delete this.dialog.form.device_name
            this.$refs.zyform.openDialog('change')
        },
        handleView(val) {
            this.dialog.config = deepClone(config1)
            this.dialog.title = '查看' + this.table_title
            this.dialog.form = this.from(deepClone(val))
            this.$refs.zyform.openDialog('view')
        },
    },
    computed: {
        ...mapState('backstage', ['backstageData', 'deviceType']),
        tags() {
            if (this.pagination.total !== undefined) {
                return [
                    { title: '总数', num: this.pagination.total },
                    { title: '待处理', num: this.stat.pending },
                    { title: '未完成', num: this.stat.unCompleted },
                    { title: '已完成', num: this.stat.completed },
                ]
            } else return []
        },
    },
    created() {
        this.searchBtn()
        formConfig[0].options = this.backstageData
        this.formConfig = formConfig
        this.dialog.config = config0
        column[column.length - 1].buttons = [
            {
                text: '查看',
                click: (val) => this.handleView(val),
                icon: 'el-icon-s-comment',
            },
            {
                text: '处理',
                click: (val) => this.handleEdit(val),
                if: (val) => val.state != 2,
                icon: 'el-icon-edit',
            },
            {
                text: '修改',
                click: (val) => this.handleEdit(val),
                if: (val) => val.state == 2,
                icon: 'el-icon-edit',
            },
            {
                text: '删除',
                click: (val) => this.delete(val),
                icon: 'el-icon-delete',
            },
        ]
        column[column.length - 1].if = this.operate
        this.tableColumn = column
    },
}
</script>
